<template>
	<view class="page flex-col">
		<view class="section flex-col">
			<view class="block flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<view class="block_4 flex-col">
					<image style="width: 100%; height: 190rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/45485a1e6fbb3de89251ee9865340622848c50d9.png" mode=""></image>
					<!-- <view class="box_4  ">
						<view class="box_20 flex-row" v-for="(item, index) in looplist" :key="index">
							<view class="text-group_7 flex-col justify-between">
								<view class="text-wrapper_8">
									<text class="text_46">¥</text>
									<text class="text_47">{{item.money}}</text>
								</view>
								<text class="text_48">{{item.type}}</text>
							</view>
							<view class="box_21 flex-col"></view>
							<view class="section_12 flex-col justify-between">
								<button class="button_7 flex-col" @click="onClick_2">
									<text class="text_49">立即领取</text>
								</button>
								<text class="text_50">{{item.name}}</text>
							</view>
						</view>
					</view> -->
					<!-- <view class="box_4  "> -->
						<scroll-view scroll-y class="box_4">
						<view class="box_20 flex-row" v-for="(item, index) in looplist" :key="index">
							<view class="text-group_7 flex-col justify-between" @click="onClick_5(item)">
								<view class="text-wrapper_8">
									<text class="text_46">¥</text>
									<text class="text_47">{{item.jian}}</text>
								</view>
								<!-- <text class="text_48">{{item.type}}</text> -->
								<text class="text_48" v-if="item.type == 1">代金券</text>
								<text class="text_48" v-if="item.type == 2">满减券</text>
								<text class="text_48" v-if="item.type == 3">折扣券</text>
							</view>
							<view class="box_21 flex-col"></view>
							<view class="section_12 flex-col justify-between">
								<button class="button_7 flex-col" @click="onClick_2(item,index)" v-if="item.else_stock>0">
									<text class="text_49">立即领取</text>
								</button>
								<text  class="ylw" v-else>已领完</text>
								<text class="text_50" @click="onClick_5(item)">{{item.name}}</text>
							</view>
						</view>
						</scroll-view>
					<!-- </view> -->
				</view>
				<!-- 弹窗 -->
				<!-- // q_type 平台1 场馆2 新人3 -->
				<!-- //type 代金券1 满减券2 折扣券3 -->
				<view class="box_111 flex-col" v-if="box_111">
					<view class="box_2 flex-row">
						<!-- 平台 -->
						<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 1">
							<!-- 代金券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 1">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 1">{{itemlist.man}}元代金券</text>
							<!-- 减券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 2">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
							<!-- 折扣券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 3">
								<text class="text_1"></text>
								<text class="text_2">{{itemlist.jian}}折</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
						</view>
				
						<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 1">
							<text class="text_4">全场抵用券</text>
							<text class="text_5">{{itemlist.can_get_time}}</text>
						</view>
						<!-- 场馆 -->
						<!-- 场馆 -->
						<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 2">
							<!-- 代金券 -->
							<view class="text-wrapper_1"  v-if="itemlist.type == 1">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 1">{{itemlist.man}}元代金券</text>
							<!-- 减券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 2">
								<text class="text_1">¥</text>
								<text class="text_2">{{itemlist.jian}}</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 2">{{itemlist.man}}元满减券</text>
							<!-- 折扣券 -->
							<view class="text-wrapper_1" v-if="itemlist.type == 3">
								<text class="text_1"></text>
								<text class="text_2">{{itemlist.jian}}折</text>
							</view>
							<text class="text_3" v-if="itemlist.type == 3">{{itemlist.man}}元折扣券</text>
						</view>
						<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 2">
							<text class="text_4">场馆抵用券</text>
							<text class="text_5">{{itemlist.can_get_time}}</text>
						</view>
						<!-- 新人 -->
						<view class="text-group_1 flex-col justify-between" v-if="itemlist.q_type == 3">
							<view class="text-wrapper_1">
								<text class="text_1">¥</text>
								<text class="text_2">10</text>
							</view>
							<text class="text_3">满100元减</text>
						</view>
						<view class="text-group_2 flex-col justify-between" v-if="itemlist.q_type == 3">
							<text class="text_4">新人抵用券</text>
							<text class="text_5">{{itemlist.can_get_time}}</text>
						</view>
						<image @click="box_open" class="icon_11" referrerpolicy="no-referrer"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/eb1eebfd593afbcce3c105098da1c48e231045d5.png" />
					</view>
					<image @click="box_close" class="icon_1" referrerpolicy="no-referrer"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/dab4b52d01ac2d9220cd1547e7494656a517d6cf.png" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "场馆专区",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				looplist: [{
						money: 10,
						type: '代金券',
						name: '绍兴奥体'

					}
				],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 16,
				},
				totalPage: '', //几页
				q_type:'',
				act_id:'',
				box_111: false,
				itemlist: {},
			};
		},
		onLoad(options) {
			console.log(options)
			this.q_type = options.q_type
			this.act_id = options.act_id
			this.getCoupon()
		},
		methods: {
			onClick_5(item) {
				uni.navigateTo({
					url: '/pages_a/coupon/coupon_details?id=' + item.id
				})
			},
			async getCoupon() {
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					q_type:this.q_type,
					act_id:this.act_id,
					open_id: uni.getStorageSync('openid'),
				}
				let res = await market.getCoupon(postData);
				if (res.code == 1) {
					this.looplist = res.data.result.data
				}
			},
			onClick_2(item, index) {
				this.itemlist = item
				let datas = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					coupon_id: item.id,
					open_id: uni.getStorageSync('openid'),
				};
				market.insertCouponRecord(datas).then(result => {
					if (result.code == 1) {
						this.box_111 = true
					} else {
						uni.showToast({
							title: result.info,
							icon: 'exception',
							duration: 850
						});
					}
				})
			},
			box_close() {
				this.box_111 = false
			},
			box_open() {
				uni.navigateTo({
					url: '/pages/venues/index'
				})
			},
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';
	.page {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.section {
			background-color: rgba(255, 255, 255, 1);
			height: 1625rpx;
			width: 750rpx;

			.block {
				position: relative;
				width: 750rpx;
				height: 1625rpx;
				background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/18c99a6c80a59eddb278e162fd650ba215c54c95.png') 100% no-repeat;
				background-size: 750rpx 2240rpx;
				
				.box_111 {
					background-color: rgba(0, 0, 0, 0.6);
					width: 750rpx;
					/* height: 1624rpx; */
					height: 100%;
					position: absolute;
					z-index: 999;
				
					.box_2 {
						width: 558rpx;
						height: 616rpx;
						background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ebf35f2fa3b35224f9fbfe7de42abd3e11c5fff7.png') 100% no-repeat;
						background-size: 100% 100%;
						margin: 50% 0 0 92rpx;
				
						.text-group_1 {
							width: 100rpx;
							height: 97rpx;
							margin: 267rpx 0 0 50rpx;
				
							.text-wrapper_1 {
								width: 100rpx;
								height: 59rpx;
								overflow-wrap: break-word;
								font-size: 0;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: center;
								white-space: nowrap;
								line-height: 35rpx;
				
								.text_1 {
									width: 100rpx;
									height: 59rpx;
									overflow-wrap: break-word;
									color: rgba(241, 16, 49, 1);
									font-size: 35rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 35rpx;
								}
				
								.text_2 {
									width: 100rpx;
									height: 59rpx;
									overflow-wrap: break-word;
									color: rgba(241, 16, 49, 1);
									font-size: 44rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 80rpx;
								}
							}
				
							.text_3 {
								width: 92rpx;
								height: 19rpx;
								overflow-wrap: break-word;
								color: rgba(203, 155, 105, 1);
								font-size: 20rpx;
								font-family: SourceHanSansSC-Normal;
								font-weight: NaN;
								text-align: center;
								white-space: nowrap;
								line-height: 20rpx;
								margin: 30rpx 0 0 8rpx;
							}
						}
				
						.text-group_2 {
							width: 224rpx;
							height: 60rpx;
							margin: 283rpx 102rpx 0 90rpx;
				
							.text_4 {
								width: 152rpx;
								height: 29rpx;
								overflow-wrap: break-word;
								color: rgba(163, 98, 32, 1);
								font-size: 30rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 30rpx;
								margin-left: 30rpx;
							}
				
							.text_5 {
								width: 224rpx;
								height: 16rpx;
								overflow-wrap: break-word;
								color: rgba(203, 155, 105, 1);
								font-size: 20rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 20rpx;
								margin-top: 15rpx;
							}
						}
				
						.icon_11 {
							position: absolute;
							z-index: 99;
							width: 280rpx;
							height: 70rpx;
							margin: 490rpx 0 45rpx 128rpx;
						}
					}
				
					.icon_1 {
						width: 70rpx;
						height: 70rpx;
						margin: 25rpx 0 445rpx 340rpx;
					}
				}

				.block_4 {
					box-shadow: 8px 14px 13px 0px rgba(0, 0, 0, 0.13);
					background-color: #FADCDD;
					border-radius: 29px;
					height: 1399rpx;
					width: 690rpx;
					position: absolute;
					left: 30rpx;
					top: 197rpx;

					.box_4 {
						width: 750rpx !important;
						height: 80%;
						margin-top: 30rpx;

						.box_20 {
							width: 316rpx;
							height: 124rpx;
							background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/65f4b0ed97f2d4a1ff6b7e40ce760be65c26b5d7.png') 100% no-repeat;
							background-size: 100% 100%;
							margin-left: 20rpx;
							margin-top: 30rpx;
							float: left;

							.text-group_7 {
								width: 81rpx;
								height: 77rpx;
								margin: 24rpx 0 0 19rpx;

								.text-wrapper_8 {
									width: 80rpx;
									height: 44rpx;
									overflow-wrap: break-word;
									font-size: 0;
									font-family: DIN-Bold;
									font-weight: 700;
									text-align: center;
									white-space: nowrap;
									line-height: 30rpx;

									.text_46 {
										width: 80rpx;
										height: 44rpx;
										overflow-wrap: break-word;
										color: rgba(253, 243, 212, 1);
										font-size: 30rpx;
										font-family: DIN-Bold;
										font-weight: 700;
										text-align: left;
										white-space: nowrap;
										line-height: 30rpx;
									}

									.text_47 {
										width: 80rpx;
										height: 44rpx;
										overflow-wrap: break-word;
										color: rgba(253, 243, 212, 1);
										font-size: 24rpx;
										font-family: DIN-Bold;
										font-weight: 700;
										text-align: left;
										white-space: nowrap;
										line-height: 40rpx;
									}
								}

								.text_48 {
									width: 74rpx;
									height: 23rpx;
									overflow-wrap: break-word;
									color: rgba(253, 243, 212, 1);
									font-size: 24rpx;
									font-family: PingFang-SC-Bold;
									font-weight: 700;
									text-align: center;
									white-space: nowrap;
									line-height: 24rpx;
									margin: 10rpx 0 0 7rpx;
								}
							}

							.box_21 {
								background-color: rgba(254, 97, 70, 1);
								width: 1rpx;
								height: 78rpx;
								margin: 23rpx 0 0 19rpx;
							}

							.section_12 {
								width: 140rpx;
								height: 77rpx;
								margin: 24rpx 28rpx 0 28rpx;

								.button_7 {
									background-color: rgba(254, 97, 70, 1);
									border-radius: 17px;
									height: 36rpx;
									width: 140rpx;

									.text_49 {
										width: 79rpx;
										height: 40rpx;
										overflow-wrap: break-word;
										color: rgba(255, 240, 227, 1);
										font-size: 20rpx;
										font-weight: 700;
										text-align: center;
										white-space: nowrap;
										line-height: 20rpx;
										margin: 8rpx 0 0 32rpx;
									}
								}
								.ylw{
									width: 61rpx;
									height: 21rpx;
									overflow-wrap: break-word;
									color: rgba(255, 255, 255, 1);
									font-size: 22rpx;
									font-family: PingFang-SC-Medium;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 22rpx;
									margin: 10rpx 0 24rpx 35rpx;
								}

								.text_50 {
									width: 160rpx;
									height: 50rpx;
									color: rgba(253, 243, 212, 1);
									font-size: 22rpx;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									line-height: 60rpx;
								}
							}
						}

						.text-wrapper_2 {
							width: 80rpx;
							height: 44rpx;
							overflow-wrap: break-word;
							font-size: 0;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: center;
							white-space: nowrap;
							line-height: 30rpx;
							margin-top: 40rpx;

							.text_8 {
								width: 80rpx;
								height: 44rpx;
								overflow-wrap: break-word;
								color: rgba(254, 97, 70, 1);
								font-size: 30rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 30rpx;
							}

							.text_9 {
								width: 80rpx;
								height: 44rpx;
								overflow-wrap: break-word;
								color: rgba(254, 97, 70, 1);
								font-size: 60rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 60rpx;
							}
						}
					}
				}
			}
		}


	}
</style>
